<script type="text/javascript">
  function skipTaskFlow(taskFlowId) {
    var targetStatus = 5;
    if(confirm("确认要将id=" + taskFlowId + "任务流跳过吗?")){
      $.post(
              '${request.contextPath}/manage/task/changeTaskFlowStatus.json',
              {
                taskFlowId: taskFlowId,
                status: targetStatus
              },
              function(data){
                if(data.result){
                  alert("操作成功");
                }else{
                  alert("操作失败,message=" + data.message);
                  alert(data.message);
                }
              }
      );
      window.location.reload();
    }
  }

  function changeParam(){
    var prettyParamText = document.getElementById("prettyParam");
    if(prettyParamText.value == ""){
      alert("配置参数不能为空");
      prettyParamText.focus();
      return false;
    }
    var changeParamBtn = document.getElementById("changeParamBtn");
    changeParamBtn.disabled = true;

    $.post(
            '${request.contextPath}/manage/task/changeParam.json',
            {
              taskId: taskId.value,
              prettyParamText: prettyParamText.value
            },
            function(data){
              if(data.result){
                $("#changeParamInfo").html("<div class='alert alert-error' ><strong>Success!</strong>更新成功，窗口会自动关闭<button class='btn-close' data-bs-dismiss='alert'></button></div>");
                var targetId = "#changeParamModal";
                setTimeout("$('" + targetId +"').modal('hide');window.location.reload();",1000);
              }else{
                alert(data.message);
                changeParamBtn.disabled = false;
                $("#changeParamInfo").html("<div class='alert alert-error' ><strong>Error!</strong>更新失败！<button class='btn-close' data-bs-dismiss='alert'></button></div>");
              }
            }
    );
  }
</script>

<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">
          任务流详情
        </h3>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="card-header">
            <h3 class="card-title">
              <i class="bi bi-globe"></i>基本信息
            </h3>
          </div>
          <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover table-sm">
              <tr>
                <td style="white-space: nowrap">任务id</td>
                <td>${taskQueue.id!}</td>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
              </tr>
              <tr>
                <td style="white-space: nowrap">集群id</td>
                <td>
                  <a target="_blank" href="${request.contextPath}/manage/task/list?appId=${taskQueue.appId!}">${taskQueue.appId!}</a>
                  &nbsp;<a target="_blank" href="${request.contextPath}/admin/app/index?appId=${taskQueue.appId!}">[前台]</a>
                  &nbsp;<a target="_blank" href="${request.contextPath}/manage/app/index?appId=${taskQueue.appId!}">[运维]</a>
                  <#if (taskQueue.status == 2)>
                    &nbsp;<a href="${request.contextPath}/manage/task/execute?taskId=${taskQueue.id!}">[重试任务]</a>
                  </#if>
                  <#if appDesc?? && ((appDesc.type == 1) || (appDesc.type == 4))>
                    &nbsp;<a target="_blank" href="${request.contextPath}/manage/app/appNutCrackerStat?appId=${taskQueue.appId!}">[代理]</a>
                  </#if>
                </td>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
              </tr>
              <tr>
                <td style="white-space: nowrap">重要信息</td>
                <td>${taskQueue.importantInfo!}</td>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
              </tr>
              <tr>
                <td style="white-space: nowrap">执行机器</td>
                <td>
                  ${taskQueue.executeIpPort!}
                </td>
                <td></td>
              </tr>
              <tr>
                <td style="white-space: nowrap">任务名</td>
                <td>${taskQueue.className!}</td>
                <td></td>
              </tr>
              <tr>
                <td style="white-space: nowrap">进度</td>
                <td>
                  ${taskQueue.progress!}
                </td>
                <td></td>
              </tr>
              <tr>
                <td style="white-space: nowrap">任务初始参数</td>
                <td>
                  ${taskQueue.initParam!}
                </td>
                <td>
                </td>
              </tr>
              <tr>
                <td style="white-space: nowrap">任务动态参数</td>
                <td>
                  ${taskQueue.prettyParam!}
                </td>
                <td style="white-space: nowrap">
                  <button type="button" class="btn btn-success" data-bs-target="#changeParamModal" data-bs-toggle="modal">修改</button>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">
          <i class="bi bi-globe"></i>任务列表
        </h3>
      </div>
      <div class="card-body table-responsive">
        <table class="table table-striped table-bordered table-hover table-sm" id="tableDataList">
          <thead>
          <tr>
            <th>序号</th>
            <th>任务流id</th>
            <th>步骤名称</th>
            <th>超时时间(s)</th>
            <th>执行时间(s)</th>
            <th>执行IP</th>
            <th>状态</th>
            <th>日志</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>步骤描述</th>
            <th>运维建议</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <#list taskStepFlowList as taskStepFlow>
            <tr>
              <td>${taskStepFlow.orderNo!}</td>
              <td>${taskStepFlow.id!}</td>
              <td>${taskStepFlow.stepName!}</td>
              <td>${taskStepFlow.taskStepMeta.timeout!}</td>
              <td>${taskStepFlow.costSeconds!}</td>
              <td>${taskStepFlow.executeIpPort!}</td>
              <td>${taskStepFlow.statusDesc!}</td>
              <td>
                <a href="#${taskStepFlow.stepName!}">查看</a>
              </td>
              <td>
                ${taskStepFlow.startTime!?string("yyyy-MM-dd HH:mm:ss")}
              </td>
              <td>
                ${taskStepFlow.endTime!?string("yyyy-MM-dd HH:mm:ss")}
              </td>
              <td>${taskStepFlow.taskStepMeta.stepDesc!}</td>
              <td>${taskStepFlow.taskStepMeta.opsDevice!}</td>
              <td>
                <#if (taskStepFlow.status == 0) || (taskStepFlow.status == 1) || (taskStepFlow.status == 2)>
                  <button type="button" class="btn btn-success btn-sm" onclick="skipTaskFlow('${taskStepFlow.id!}')">跳过</button>
                </#if>
              </td>

            </tr>
          </#list>
          </tbody>
        </table>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">
          <i class="bi bi-globe"></i>详细日志
        </h3>
      </div>
      <div class="card-body table-responsive">
        <table class="table table-striped table-bordered table-hover table-sm" id="tableDataList">
          <thead>
          <tr>
            <th>序号</th>
            <th>步骤名称</th>
            <th>日志</th>
          </tr>
          </thead>
          <tbody>
          <#list taskStepFlowList as taskStepFlow>
            <#assign stepName = taskStepFlow.stepName/>
            <tr id="${stepName!}">
              <td>${taskStepFlow_index + 1}</td>
              <td>${stepName!}</td>
              <td>
                <#list stepLogListMap[stepName] as line>
                  ${line!}<br/>
                </#list>
              </td>
            </tr>
          </#list>
          </tbody>
        </table>
      </div>
    </div>

    <div id="changeParamModal" class="modal fade" tabindex="-1" data-width="400">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <h4 class="modal-title">动态配置修改</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
          </div>

          <form class="form-horizontal form-bordered form-row-stripped">
            <div class="modal-body">
              <div class="row">
                <!-- 控件开始 -->
                <div class="col-md-12">
                  <!-- form-body开始 -->
                  <div class="form-body">
                    <div class="form-group">
                      <textarea rows="20" name="prettyParam" id="prettyParam" class="form-control">${taskQueue.prettyParam!}</textarea>
                    </div>
                    <input type="hidden" name="taskId" id="taskId" value="${taskQueue.id!}"/>
                  </div>
                  <!-- form-body 结束 -->
                </div>
                <div id="changeParamInfo"></div>
                <!-- 控件结束 -->
              </div>
            </div>

            <div class="modal-footer">
              <button type="button" data-bs-dismiss="modal" class="btn btn-secondary">Close</button>
              <button type="button" id="changeParamBtn" class="btn btn-danger" onclick="changeParam()">Ok</button>
            </div>

          </form>
        </div>
      </div>
    </div>
  </div>
</div>
